<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@include file="base.jsp" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<sys:genericTag4o id="menusByUser" methodName="queryMenusByUser" className="com.tmpt.controller.taglib.SecurityV2Tag"/>

<%
//switch to desktop mode 
String showMode = (String)session.getAttribute("showMode");
if("desktop".equals(showMode)){
    response.setContentType("text/html; charset=UTF-8");
	response.sendRedirect("../admin123/desktop/index.jsp");
	session.setAttribute("showMode", "");
}
 %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>${attr.webTitle}</title>

<%@include file="base_resource.jsp" %>
<link rel="stylesheet" type="text/css" href="${path}/js/jquery/easyui1.5/themes/bootstrap/easyui.css"/>
<link rel="stylesheet" type="text/css" href="${path}/js/jquery/easyui1.5/themes/icon.css"/>
<%--<link href="${path}/css/font-awesome4.7.0.css" rel="stylesheet">--%>
<script type="text/javascript" src="${path}/js/jquery-1.8.0.min.js"></script>
<script src="${path}/js/jquery/easyui1.5/jquery.easyui.min.js"></script>
<script src="${path}/js/jquery/easyui1.5/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">
/*var timer = 0;
$(window).resize(function(){
	clearTimeout(timer);
	timer = setTimeout(resizeWest(),1000);
});*/

$(function(){

	var treeAll = ${menusByUser};

	$('#accordion').accordion({ //初始化accordion
		fillSpace:true,
		fit:true,
		border:false,
		animate:false
	});

	$.each(treeAll,function(i,node1){
		var text = node1.text;
		var id = node1.id;
		var iconClass = node1.iconClass;
		if(iconClass==null)iconClass='';
		$('#accordion').accordion('add', {
			title: text,
			iconCls:iconClass,
			content: "<ul id='tree"+id+"'></ul>",
			selected: true
		});

		var icon = [];
		$("#tree"+id).tree({
			data:node1.children,
			lines:true,
			iconCls:"icon-save",
			onSelect:function(node){
				$(this).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);
			},
			onClick:function(node){
				if(node.attributes){
					Open(node.text,node.attributes.url,node.attributes.menu2Id);
				}
			},
			formatter: function (node) {
				icon.push({ "domId": node.domId, "iconCls":node.iconClass });
				return node.text;
			}
		});

		//根据url修改图标，使用内联样式覆盖外部链接
		$.each(icon, function (index, val) {
			$('#'+val.domId+' .tree-icon').removeClass("tree-file");
			$('#'+val.domId+' .tree-icon').addClass(val.iconCls);
			/*var title = $('#'+val.domId+' .tree-title').html();
			$('#'+val.domId+' .tree-title').html("");
			$('#'+val.domId+' .tree-title').append("   ").append(title);*/
		});
		$.parser.parse();


	});

	//窗口大小变化时自动调整
	function resizeWest(){
		var westHeight = $('#west').height();
		$('#accordionDiv').css("height",westHeight-30+'px');
	}
	resizeWest();
	//setInterval(resizeWest,1000);// 注意函数名没有引号和括弧！
	$.parser.parse();


	var icon1 = [];
	$("#tree").tree({
		url:'right_v2/menuAjax_queryMenusByUser.action',
		lines:true,
		idField: 'id',
		treeField:'text',
		iconCls:"icon-save",
		onExpand:function(node){
			resetIcon(icon1);
		},
		onSelect:function(node){
			$(this).tree(node.state === 'closed' ? 'expand' : 'collapse', node.target);
			resetIcon(icon1);
		},
		onClick:function(node){
			if(node.attributes){
				Open(node.text,node.attributes.url,node.attributes.menu2Id);
			}
		},
		formatter: function (node) {
			icon1.push({ "domId": node.domId, "iconCls":node.iconClass });
			return node.text;
		},
		onLoadSuccess:function(){
			//根据url修改图标，使用内联样式覆盖外部链接
			resetIcon(icon1);
		}
	});

	$.parser.parse();
	$('#tree').hide();

	//绑定tabs的右键菜单
	var tabTitle;
	$("#tabs").tabs({
		onContextMenu:function(e,title){
			e.preventDefault();
			tabTitle = title;
			 
		    /* 选中当前触发事件的选项卡 */
	        $("#tabs").tabs("select",title);
	        
			$("#tabsMenu").menu('show',{
				left:e.pageX,
				top:e.pageY
			});//.data("tabTitle",title);
		}
	});

	//实例化menu的onClick事件
	$("#tabsMenu").menu({
		onClick:function(item){
			CloseTab(this,item.name);
		}
	});

    //几个关闭事件的实现
    function CloseTab(menu, type) {
        var curTabTitle = tabTitle;//$(menu).data("tabTitle");
        var tabs = $("#tabs");
        
        if (type === "Close") {
            tabs.tabs("close", curTabTitle);
            return;
        }
        
        var allTabs = tabs.tabs("tabs");
        var closeTabsTitle = [];
        
        $.each(allTabs, function () {
            var opt = $(this).panel("options");
            if (opt.closable && opt.title != curTabTitle && type === "Other") {
                closeTabsTitle.push(opt.title);
            } else if (opt.closable && type === "All") {
                closeTabsTitle.push(opt.title);
            }
        });
        
        for (var i = 0; i < closeTabsTitle.length; i++) {
            tabs.tabs("close", closeTabsTitle[i]);
        }
    }
});


//根据url修改图标，使用内联样式覆盖外部链接
function resetIcon(icon1){
	$.each(icon1, function (index, val) {
		$('#'+val.domId+' .tree-icon').removeClass("tree-file");
		$('#'+val.domId+' .tree-icon').removeClass("tree-folder");
		$('#'+val.domId+' .tree-icon').removeClass("tree-folder-open");
		$('#'+val.domId+' .tree-icon').addClass(val.iconCls);
	});
}

function Open(text,url){
	var jsonParam = {};
	jsonParam.url = '${path}'+'/'+url;
	jsonParam.title = text;
	jsonParam.parameter1_iframedialog = '1';
	jsonParam.parameter2_iframedialog = '2';
	jsonParam.parameter3_iframedialog = '3';
	OpenNoProjectPath(jsonParam);

	/*
	if($("#tabs").tabs('exists',text)){
		$("#tabs").tabs('select',text);
	}else{
		$("#tabs").tabs('add',{
			title:text,
			closable:true,
			content:'<iframe src="'+url+'" scrolling="auto" frameborder="0" style="width: 100%; height: 100%;"/>'
		});
	}*/
}

function Open(text,url,menu2Id){
	var jsonParam = {};
	jsonParam.url = '${path}'+'/'+url;
	jsonParam.title = text;
	jsonParam.parameter1_iframedialog = menu2Id;
	jsonParam.parameter2_iframedialog = url;
	jsonParam.parameter3_iframedialog = '3';
	OpenNoProjectPath(jsonParam);

	/*
	 if($("#tabs").tabs('exists',text)){
	 $("#tabs").tabs('select',text);
	 }else{
	 $("#tabs").tabs('add',{
	 title:text,
	 closable:true,
	 content:'<iframe src="'+url+'" scrolling="auto" frameborder="0" style="width: 100%; height: 100%;"/>'
	 });
	 }*/
}

function getSelectedTabTitle(){
	var pp = $('#tabs').tabs('getSelected');
	var title = pp.panel('options').title; // 相应的标签页（tab）对象
	return title;
}

function OpenNoProjectPath(jsonParam){
	alert(5555);
	var text = jsonParam.title;
	if($("#tabs").tabs('exists',text)){
		$("#tabs").tabs('select',text);
	}else{
		var iframe = $('<iframe/>').attr({
			id : text,
			name : text,
			width : '100%',
			height : '100%',
			frameborder : 0,
			scrolling:'yes'
		});

		var form = $('<form/>').attr({
			action:jsonParam.url,
			method:'POST',
			target:text
		});
		var input1 = $('<input/>').attr({
			type:'hidden',
			name:'parameter1_iframedialog',
			value:jsonParam.parameter1_iframedialog
		});
		var input2 = $('<input/>').attr({
			type:'hidden',
			name:'parameter2_iframedialog',
			value:jsonParam.parameter2_iframedialog
		});
		var input3 = $('<input/>').attr({
			type:'hidden',
			name:'parameter3_iframedialog',
			value:jsonParam.parameter3_iframedialog
		});
		form.append(input1);
		form.append(input2);
		form.append(input3);

		var win = $('<div/>').attr({
			width : '100%',
			height : '100%'
		});
		win.append(form);
		win.append(iframe);

		$("#tabs").tabs('add',{
			title:jsonParam.title,
			closable:true,
			content:iframe
		});
		form.submit();
	}
}

function checkTimeout(){
	var url = '${path}'+'/'+'admin123/css/test/tree_data1.json';
	$.ajax({
		type:"POST",
		url:url,
		dataType:"json",
		success:function(msg){
			alert(JSON.stringify(msg));
		},
		error:function(er){
			//alert(er.responseText.trim());
			if(er.responseText!='' && er.responseText.indexOf('date error')!=-1){
				alert(er.responseText);
			}else{
				if(er.responseText!='' && er.responseText.indexOf('登录')!=-1){
					alert('会话超时，请重新登录');
				}
			}
		}
	});
}

function goOut(){
	//注销	
	window.location.href='${path}/j_spring_security_logout';
}

function goDesktopMode(){
	//注销	
	window.location.href='${path}/admin123/desktop/index.jsp';
}

function error(er){
	var errorText = er;
	try{
		if(er.responseText != undefined && er.responseText != ''){
			errorText = er.responseText;
		}
		if(errorText!='' && errorText.indexOf('please login first, it is a login page')!=-1){
			goOut();
		}
		else if(errorText!='' && errorText.indexOf('没有权限访问')!=-1){
			alert('没有权限访问');
		}
		else if(errorText!='' && errorText.indexOf('资源权限未分配')!=-1){
			alert('资源权限未分配');
		}
		else if(er.responseText!='' && er.responseText.indexOf('date error')!=-1){ //系统返回的错误信息
			alert(er.responseText);
		}
		else{
	        alert(errorText);
		}
	}catch(Exception){
	    alert(errorText);
	}
}

/*
//只允许一个用户登录
$(function(){
	var interval;
	function run(intervalTime){
		interval = setInterval(function(){
			$.ajax({
				type:"POST",
				url:"empAjax!singleUser.action",
				dataType:"json",
				data:{},
				success:function(msg){
					//alert(msg);
				},
				error:function(er){
					//alert(er.responseText);
				}
			})

			},intervalTime*1000);
	}
	var intervalTime = 20;
	clearTimeout(interval);
	run(intervalTime);
})
*/
window.onbeforeunload = function (e) {
    e = e || window.event;
    var y = e.clientY
    if (y <= 0 || y >= Math.max(document.body.clientHeight, document.documentElement.clientHeight)){
        e.returnValue = "确认关闭浏览器窗口？！！";
    }
}

function changeMenu(value,name){
	if(name=='accordion'){
		$('#tree').hide();
		$('#accordionDiv').show();
	}else if(name=='tree'){
		$('#tree').show();
		$('#accordionDiv').hide();
	}
}

</script>
<style type="text/css">
	.west{
		width: 200px;
		padding: 0px;
		overflow-y:auto;
		overflow-x:hidden;
	}
	.north{
		padding-left: 10px;
		position: relative;
		height: 60px;
		margin: auto 0 ;
		font-size: 16px;
  		background-color: #3c8dbc;
		background: -webkit-linear-gradient(top,#3c8dbc 0,#3c8dbc 100%);
		background: -moz-linear-gradient(top,#3c8dbc 0,#3c8dbc 100%);
		background: -o-linear-gradient(top,#3c8dbc 0,#3c8dbc 100%);
		background: linear-gradient(to bottom,#3c8dbc 0,#3c8dbc 100%);
		/*
  		background-color: #f2f2f2;
  		background: -webkit-linear-gradient(top,#f0f0f0 0,#f0f0f0 100%);
		background: -moz-linear-gradient(top,#f0f0f0 0,#f0f0f0 100%);
		background: -o-linear-gradient(top,#f0f0f0 0,#f0f0f0 100%);
		background: linear-gradient(to bottom,#f0f0f0 0,#f0f0f0 100%);*/
		/*
  		background-color: #E0ECFF;
		background: -webkit-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
		background: -moz-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
		background: -o-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
		background: linear-gradient(to bottom,#EFF5FF 0,#E0ECFF 100%);*/
		background-repeat: repeat-x;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#E0ECFF,GradientType=0);
	}
	.tree-node {
		height: 22px;
		white-space: nowrap;
		cursor: pointer;
	}

	.north_btn_a {
		text-decoration: none;
		color:SpringGreen;
	}
	.north_btn_a:hover
	 {
		color: #ffffff;
	 }
</style>
</head>
<body class="easyui-layout">
	<!--  <font color=red>注：退出系统时请使用菜单栏中[退出]按钮退出，非正常退出将导致账户被锁30分钟，30分钟后方可正常登录</font> -->
	<div region="north" class="north" >

		<div style="color:#ffffff;">
			<div style="width: 60px;height:50px;float: left;margin-top: 5px;margin-left: 10px;">
				<i class="fa fa-keyboard-o fa-3x SpringGreen " aria-hidden="true"></i>
				<%--<i class="fa fa-codepen fa-3x SpringGreen " aria-hidden="true"></i>--%>
				<%--<img style="width: 50px;height:50px;" src="../images/logo1.png" alt="">--%>
			</div>
			<div style="height:50px;float: left;margin-top: 7px;margin-left: 10px;">
				<span style="font-size: large;color:#ffffff;">${attr.webTitle}</span>
				<br/>
				<span style="font-size: small;color:#dddddd;">  Just do it, everything is under control.</span>
			</div>
		</div>
		<div style="position:absolute;bottom:10px;right:10px;z-index:22;color:#ffffff;border: 0px solid red;font-size: 15px;">
			<span style="margin-right: 10px;">
				<i class="fa fa-user-circle-o fa-1x fa-fw"></i>
				<s:property value="#attr.magSystemDtoSession.name"/>
				，这是您第
				<span style="color: #fff;"><s:property value="#attr.magSystemDtoSession.loginTimes+1"/></span>
				次登录系统
			</span>
			<span style="margin-right: 10px;">
				<a href="#" class="north_btn_a"  onclick="javascript:goDesktopMode();">
					<i class="fa fa-desktop fa-1x fa-fw SpringGreen"></i>
					切换到桌面模式</a>
			</span>
			<span style="margin-right: 10px;">
				<a href="#" class="north_btn_a"  onclick="javascript:goOut();">
					<i class="fa fa-sign-out fa-1x fa-fw SpringGreen"></i>
					退出</a>
			</span>
		</div>

	</div>

	<div id="west" region="west" class="west" title="菜单栏">
		<input id="ss" class="easyui-searchbox" style="width:100%;height: 30px;"
				data-options="searcher:changeMenu,prompt:'菜单切换',menu:'#mm'"/>
		<div id="accordionDiv" style="width: 200px;">
			<div id="accordion" class="easyui-accordion"></div>
		</div>
		<div id="tree" style="margin-left: 10px;"></div>
	</div>
	<div id="mm" style="width:100px;" class="easyui-menu" data-options="onClick:menuHandler">
		<div data-options="name:'accordion',iconCls:'fa fa-align-justify'">手风琴</div>
		<div data-options="name:'tree',iconCls:'fa fa-tree'">树形</div>
	</div>
	<script type="application/javascript">
		function menuHandler(item){
			changeMenu(1,item.name);
		}
	</script>
	
	<div region="center">
		<div id="tabs" class="easyui-tabs" fit="true" border="false">
			<div title="首页">
				<div style="height: 35px;"></div>

				<div style="border: 0px solid red; text-align: center; height: 40px ; line-height: 40px; font-size: 16px; font-weight: bold; color: #666666;">
					<span style="color: #0081c2;"><s:property value="#attr.magSystemDtoSession.name"/>&nbsp;</span>
					欢迎您！
					这是您第
					<span style="color: #0081c2;"><s:property value="#attr.magSystemDtoSession.loginTimes+1"/></span>
					次登录系统
					
					<s:if test="#attr.magSystemDtoSession.loginTimeLastStr!=''">
					，上次登录时间是
						<span style="color: red;"><s:property value="#attr.magSystemDtoSession.loginTimeLastStr"/></span>
					</s:if>
				</div>
			</div>
		</div>
	</div>

	<div region="south" class="south">
		&nbsp;&nbsp;Copyright © 2017 JeeCoding Company. All rights reserved.
	</div>
	
	<div id="tabsMenu" class="easyui-menu" style="width:120px;">
		<div name="Close">关闭标签</div>
		<div name="Other">关闭其它标签</div>
		<div name="All">关闭所有标签</div>
	</div>

</body>
</html>